<template>
    <div>
        <h3>房号显示</h3>
        <div>
            房型名称:
            <input type="text" v-model="feny.Haoname">
            <input type="button" value="查询" class="btn btn-primary" @click="getlist">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="quan" @click="checkone">
                    </td>
                    <td>房型名称</td>
                    <td>房号</td>
                    <td>排序</td>
                    <td>备注</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" v-model="dis" :value="item.id" @change="checktwo">
                    </td>
                    <td>{{ item.haoname}}</td>
                    <td>{{ item. xuhao}}</td>
                    <td>{{ item.paixu }}</td>
                    <td>{{ item.beizhu }}</td>
                    <td>{{ item.state==1?"上架":"下架" }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-primary" @click="shall(item.id)">
                        <input type="button" value="上架" v-if="item.state==0" class="btn btn-primary" @click="updatet(item.id,1)">
                        <input type="button" value="下架" v-if="item.state==1" class="btn btn-primary" @click="updatet(item.id,0)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共{{data.tpage}}页</span>
        <span>共{{data.tcount}}条</span>
        <span>共{{feny.pageindex}}/{{data.tpage}}页</span>
        <input type="button" value="首页" class="btn btn-primary" @click="goydn(1)">
        <input type="button" value="下一页" class="btn btn-primary" @click="goydn(feny.pageindex+1)">
        <input type="button" value="上一页" class="btn btn-primary"@click="goydn(feny.pageindex-1)">
        <input type="button" value="尾页" class="btn btn-primary"@click="goydn(data.tpage)">
    </div>
    <!-- 大商股份就看看 -->
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import moment from 'moment';
import {useRoute,useRouter} from 'vue-router'
const route=useRoute();
const router=useRouter();


let feny:any=reactive({
    pageindex:1,
    pagesize:2,
    Haoname:''
})
const data:any=reactive({
    list:[],
    tcount:0,
    tpage:0
})
onMounted(()=>{
    getlist();
})
const getlist=()=>{
    axios({
        url:'/api/Fang/showww',
        method:'get',
        params:feny
    })
    .then((res)=>{
        console.log(res);
        data.tcount=res.data.tcount;
        data.tpage=res.data.tpage;
        data.list=res.data.list;
    })
    .catch((err)=>{
        console.log(err);
    })
}
const goydn=(num:any)=>{
    if(num<1)
{
    feny.pageindex=1;
    return;
}
else if(data.tpage<num)
{
    feny.pageindex=data.tpage;
    return;
}
feny.pageindex=num;
getlist();
}
const shall=(id:any)=>{
    let f=confirm('确定删除吗')
    if(f==true)
{
    axios({
        url:'/api/Fang/deleetee',
        method:'delete',
        params:{
            id:id
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
    {
        alert('删除成功');
        getlist();
    }
    else {
        alert('删除失败');
        return;
    }
    })
    .catch((err)=>{
        console.log(err);
    })
}

}

let quan=ref(false);
let dis=ref([])
const checkone=()=>{
    quan.value=!quan.value;
    if(quan.value==true)
{
    dis.value=data.list.map((item:any)=>{
            return item.id;
        })
}
else
{
    dis.value=[];
}
}
const checktwo=()=>{
    if(dis.value.length==data.list.length)
{
    quan.value=true;
}
else
{
    quan.value=false;
}
}

const updatet=(id:any,state:any)=>{
   let f=confirm('确定修改吗')
   if(f==true){
    axios({
        url:'/api/Fang/upzhuang',
        method:'put',
        params:{
            id:id,
            state:state
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
    {
        alert('修改成功');
        getlist();
    }
    else
    {
        alert('修改失败');
    }
    })
    .catch((err)=>{
        console.log(err);
    })
   }
}
</script>

<style scoped>

</style>